<template>
  <div class="page_customerService">
    <van-nav-bar
      title="客服"
      left-arrow
      @click-left="$router.back()"
    />

    <div ref="chat_content_detail" class="chat_content_detail" v-if="chatContentList.length">
      <div class="chat_item" v-for="(item, index) in 10" :key="index">
        <van-divider class="divider_line">2021-02-22 15:35:17</van-divider>
        <van-row type="flex" class="user">
          <van-col span="18" class="user_chat_info">
            <div>
              <van-image
                round
                cover
                width="1.1rem"
                height="1.1rem"
                :src="logoImg"
              />
            </div>

            <div class="user_chat_content">
              <div class="name">6号客服</div>
              <div class="content">
                和许多华语音乐人殊途同归的是，周杰伦同样在多年的纯西化音乐浸淫后，选择了文化上的回归，
                并于2003年的第四张专辑《叶惠美》中，首度与方文山合作了《东风破》这样一首极具东方风韵的复古作品。
                从历史上来讲，任何一个时代，华语流行音乐都不缺这种洋为中用的东西合壁式作品。而《东风破》出现的时机，
                恰恰是整个华人社会西化最全面、最纯粹的时代，尤其是在流行乐坛一片西化R&B化的背景下，
                甚至面临着一种本土文化在音乐中全面缺失的危险。而周杰伦创作《东风破》，
                恰好是在一个很好的时机，为中国文化和西洋音乐结构的交流，作了一种平衡的尝试。
              </div>
            </div>
          </van-col>
        </van-row>
        <van-row type="flex" justify="end" class="customer_service">
          <van-col span="18" class="customer_chat_info">
            <div class="customer_chat_content">
              <div class="name">{{allUserInfo.nick_name ? allUserInfo.nick_name : allUserInfo.account }}</div>
              <div class="content">一盏离愁 孤单伫立在窗口
                我在门后装你人还没走
                旧地如重游 月圆更寂寞
                夜半清醒的烛火 不忍苛责我
                一壶漂泊 浪迹天涯难入喉
                你走之后 酒暖回忆思念瘦
                水向东流 时间怎么偷
                花开就一次成熟 我却错过</div>
            </div>
            <div>
              <van-image
                round
                cover
                width="1.1rem"
                height="1.1rem"
                :src="allUserInfo.avatar ? allUserInfo.avatar : logoImg"
              />
            </div>
          </van-col>
        </van-row>
      </div>
    </div>




    <van-field autocomplete="off"
      v-model="chatContent"
      center
      clearable
      placeholder="请输入"
      rows="1"
      autosize
      type="textarea"
      class="chat_text"
    >
      <template #button>
        <van-button style="padding: 3px 12px" size="mini" type="info" native-type="button" @click="sendChatContent">发送</van-button>
      </template>
    </van-field>


  </div>
</template>

<script>
  import logoImg from '@/assets/logo.png';
  import {mapGetters} from 'vuex';

  const signalR = require("@microsoft/signalr");

  // let connection = new signalR.HubConnectionBuilder()
  //   .withUrl("/chat")
  //   .build();
  //
  // connection.on("send", data => {
  //   console.log(data);
  // });

  // connection.start()
  //   .then(() => connection.invoke("send", "Hello"));

  export default {
    name: 'customerService',
    data(){
      return {
        logoImg,
        chatContent: 'hello world!',
        chatContentList: [
          {
            info: '聊天内容',
            id: '0',
            type: 'myself',
          },
          {
            info: '聊天内容',
            id: '0',
            type: 'user',
          },
        ]
      }
    },
    created() {
    },
    computed: {
      ...mapGetters(['allUserInfo']),
    },
    methods: {
      sendChatContent(){
        if (this.chatContent){
          console.log('发送', this.chatContent)
          this.chatContentList.push({
            content: this.chatContent,
            id: '2',
            type: 'user',
          })
          // 核心代码
          // 滚动
          this.$nextTick(() => {
            let msg = this.$refs.chat_content_detail
            msg.scrollTop = msg.scrollHeight // 滚动高度
          })
        }
      },


    }
  }
</script>

<style lang="scss" scoped>
.page_customerService{
  width: 100%;
  position: relative;
  box-sizing: border-box;
  height: calc(100vh);
  .chat_content_detail{
    height: calc(100vh - 88px);
    background-color: #F1F1F1;
    overflow: auto;
    .chat_item{
      font-size: 14px !important;
      padding: 10px 10px 6px 10px;
      /deep/ .divider_line{
        margin: 0;
        font-size: 8px;
        line-height: 1.8em;
      }
      .user{
        margin: 10px 0;
        .user_chat_info{
          display: flex;
          .user_chat_content{
            margin-left: 6px;
            .name{
              font-size: 8px;
            }
            .content{
              text-align: justify;
              text-justify: inter-ideograph;/*IE*/
              margin-top: 4px;
              background-color: #FFFFFF;
              letter-spacing: .8px;
              padding: 9px;
              border-radius: 3%;
            }
          }

        }
       }
      .customer_service{
        .customer_chat_info{
          display: flex;
          justify-content: flex-end;
          .customer_chat_content{
            margin-right: 6px;
            .name{
              font-size: 8px;
              text-align: right;
            }
            .content{
              text-align: justify;
              text-justify: inter-ideograph; /*IE*/
              letter-spacing: .8px;
              margin-top: 4px;
              background-color: #98E165;
              padding: 9px;
              border-radius: 3%;
            }
          }
        }
      }

    }
  }
  .chat_text{
    position: absolute;
    bottom: 1px;
    padding: 6px;
    background-color: #FFFFFF;
    border-top: 1px solid #eeeeee;
    /*/deep/ .van-cell{
      padding: 0;
    }*/
    /deep/ .van-field__control{
      /*border: 1px solid red;*/
    }
  }
}
</style>
